<template>
<div>


  <el-row style="margin-bottom:15px;">
    {{picDesc}}
    <multi-img-upload @onUpload="uploadImg" ref="mulitiImgUpload"></multi-img-upload>
  </el-row>


  <el-row style="height: 650px;">
    <el-tooltip effect="dark" placement="right"
                v-for="item in pics.slice((currentPage-1)*pagesize,currentPage*pagesize)"
                :key="item.id">
      <p slot="content" style="font-size: 14px;margin-bottom: 6px;">{{item.picDesc}}</p>
      <el-card style="width: 185px;margin-bottom: 15px;height: 199px;float: left;margin-right: 15px" class="book"
               bodyStyle="padding:10px" shadow="hover">
        <div class="cover">
          <img :src="item.picUrl">
        </div>
        <div class="info">
          <i class="el-icon-delete" @click="delInfoppi(item.productPicIds)"></i>
        </div>
      </el-card>
    </el-tooltip>
  </el-row>


  <el-row>
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-size="pagesize"
      :total="pics.length">
    </el-pagination>
  </el-row>
<!--<Master ref="master"></Master>-->
</div>
</template>

<script>

    export default {
      name: "MultiImgUpload",
      components: {
        Master:()=> import("./index.vue")
      },
      data(){
          return{
            pics: [],
            picDesc: '',
            currentPage: 1,
            pagesize: 18,
          }
      },


      mounted: function () {
        this.loadPics()
      },

      methods:{


        loadPics () {
          console.log("333");
          var _this = this
          this.$axios.get('/listppi').then(resp => {
            if (resp && resp.status === 200) {
              _this.pics = resp.data
            }
          })
        },

        handleCurrentChange: function (currentPage) {
          console.log("444");
          this.currentPage = currentPage
          console.log(this.currentPage)
        },

        // deletePicInfo (id) {
        //   this.$confirm('此操作将永久删除此图片, 是否继续?', '提示', {
        //     confirmButtonText: '确定',
        //     cancelButtonText: '取消',
        //     type: 'warning'
        //   }).then(() => {
        //       this.$axios
        //         .post('/deletePicInfo', {id: id}).then(resp => {
        //         if (resp && resp.status === 200) {
        //           this.loadPics()
        //         }
        //       })
        //     }
        //   ).catch(() => {
        //     this.$message({
        //       type: 'info',
        //       message: '已取消删除'
        //     })
        //   })
        //   // alert(id)
        // },

        uploadImg () {
          console.log("555");
          this.loadPics()
          this.picDesc = this.$refs.mulitiImgUpload.url
          this.$refs.mulitiImgUpload.clear()
        },






      }

    }
</script>

<style scoped>

</style>
